<template>
  <div class="subpage" v-if="film">
    <my-head :title="film.name"></my-head>
    <van-tabs
      v-model="active"
      color="#ff5f16"
      title-active-color="#ff5f16"
      sticky
    >
      <van-tab
        :name="i"
        :title="(l.showDate * 1000) | dateFormat2(i)"
        v-for="(l, i) in showCinemas"
        :key="i"
      >
        <mlist
          :list="cinemas"
          :filmId="film.filmId"
          :date="showCinemas[active].showDate"
        ></mlist>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      film: null,
      active: 0,
      showCinemas: [],
      cinemas: [],
    };
  },
  watch: {
    active(v) {
      this.getCinemas(this.showCinemas[v].cinemaList);
    },
  },
  methods: {
    arrAse(a, b) {
      return a["showDate"] - b["showDate"];
    },
    async getFilm() {
      let res = await this.$ajax.getMZdata(
        {
          filmId: this.$route.params.filmId,
        },
        {
          "X-Host": "mall.film-ticket.film.info",
        }
      );
      this.film = res.data.film;
    },
    async getshowCinemas() {
      let res = await this.$ajax.getMZdata(
        {
          filmId: this.$route.params.filmId,
          cityId: this.city.cityId,
        },
        {
          "X-Host": "mall.film-ticket.cinema.film-show-cinema",
        }
      );
      this.showCinemas = res.data.showCinemas.sort(this.arrAse);
      this.getCinemas(this.showCinemas[this.active].cinemaList);
    },
    async getCinemas(cinemas) {
      let res = await this.$ajax.postMZdata(
        {
          cityId: this.city.cityId,
          cinemaIds: cinemas.join(","),
        },
        {},
        {
          "X-Host": "mall.film-ticket.cinema.batch-cinema",
        }
      );
      this.cinemas = res.data.cinemas;
    },
  },
  mounted() {
    this.getFilm();
    this.getshowCinemas();
  },
};
</script>